<template>
	<view class="index">
		<view class="header">
			<view class="left">你好，{{ userInfo.userId }}</view>
			<view class="right">
				<view class="in">总收入：{{ sum.income }}</view>
				<view class="out">总支出：{{ sum.expenditure }}</view>
				<view class="inOut">总收支：{{ total }}</view>
			</view>
		</view>

		<u-cell-group>
			<u-cell-item icon="warning" title="退出登陆" :arrow="false" @click="logOff()"></u-cell-item>
			<u-cell-item icon="more-circle" title="关于我们" @click="goAbout()"></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
import { money_sum } from '@/api/api.js';

export default {
	data() {
		return {
			userInfo: {},
			sum: {
				income: 0,
				expenditure: 0
			}
		};
	},
	computed: {
		total() {
			return (this.sum.income * 100 - this.sum.expenditure * 100) / 100;
		}
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		this.getSum(this.userInfo.userId);
	},
	methods: {
		getSum(userId) {
			money_sum({ userId }).then(res => {
				this.sum.income = res.inCount;
				this.sum.expenditure = res.outCount;
			});
		},
		goAbout() {
			uni.navigateTo({
				url: '/pages/user/about'
			});
		},
		// 注销
		logOff() {
			uni.showModal({
				title: '确认操作',
				content: '是否退出登录?',
				showCancel: true,
				success: res => {
					if (res.confirm) {
						uni.removeStorageSync('userInfo');
						uni.reLaunch({
							url: '/pages/user/login'
						});
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
	.header {
		background-image: url('../../static/images/login-bg.jpg');
		background-size: 100%;
		display: flex;
		justify-content: space-between;
		padding: 40rpx;

		.left {
			font-size: 40rpx;
			color: #fff;
		}

		.right {
			line-height: 46rpx;
			.in {
				color: #18b566;
			}

			.out {
				color: #ed1c24;
			}

			.inOut {
				color: #fff;
			}
		}
	}
}
</style>
